@import '../../theme';
@import '../../mixins';
@import '~bootstrap/scss/buttons';

button {
  &:focus {
    outline: none;
  }
}
//buttons - https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L348
.btn {
  text-transform: $btn-text-transform;
  font-size: $font-size-base * 1.125;
  line-height: 1.34;
  padding: 11px 12px;
  height: 48px;
  max-height: 48px;
  min-width: 48px;

  &-sm {
    padding-top: 0;
    padding-bottom: 0;
    height: 40px;
    max-height: 40px;
    min-width: 40px;
  }

  &-lg {
    height: 55px;
    max-height: 55px;
    min-width: 55px;
  }

  &-primary {
    @include var-color('background-color', 'primary');
    @include var-color('border-color', 'primary');

    &:hover {
      // background-color: mix(#000000, theme-color('primary'), 12%);
      // border-color: mix(#000000, theme-color('primary'), 12%);
      @include var-color('background-color', 'primary');
      @include var-color('border-color', 'primary');
      @include cx-darken(88);
    }

    &.active {
      // background-color: mix(#000000, theme-color('primary'), 12%) !important;
      // border-color: mix(#000000, theme-color('primary'), 12%) !important;
      @include var-color('background-color', 'primary');
      @include var-color('border-color', 'primary');
      @include cx-darken(88);
    }

    &.disabled {
      // background-color: lighten(theme-color('primary'), 26%);
      // border-color: lighten(theme-color('primary'), 26%);
      // opacity: 1;
      @include var-color('background-color', 'primary');
      @include var-color('border-color', 'primary');
      &:hover {
        // border-color: lighten(theme-color('primary'), 26%);
        @include var-color('border-color', 'primary');
        @include cx-darken(100);
      }
    }

    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active {
      @include var-color('background-color', 'primary');
      @include var-color('border-color', 'primary');
      @include cx-darken(88);

      &:focus {
        box-shadow: 0 0 0 0.2em rgba($primary, 0.5);
      }
    }

    &:focus {
      box-shadow: 0 0 0 0.2em rgba($primary, 0.5);
    }
  }

  &-secondary {
    @include var-color('background-color', 'secondary');
    @include var-color('border-color', 'secondary');

    &:hover {
      // background-color: darken(theme-color('secondary'), 16%);
      // border-color: darken(theme-color('secondary'), 16%);
      @include var-color('background-color', 'secondary');
      @include var-color('border-color', 'secondary');
      @include cx-darken(84);
    }

    &.active {
      // background-color: darken(theme-color('secondary'), 16%) !important;
      // border-color: darken(theme-color('secondary'), 16%) !important;
      @include var-color('background-color', 'secondary');
      @include var-color('border-color', 'secondary');
      @include cx-darken(84);
    }

    &.disabled {
      // background-color: lighten(theme-color('secondary'), 31%);
      // border-color: lighten(theme-color('secondary'), 31%);
      // opacity: 1;
      @include var-color('background-color', 'secondary');
      @include var-color('border-color', 'secondary');
      &:hover {
        // border-color: lighten(theme-color('secondary'), 31%);
        @include var-color('border-color', 'secondary');
        @include cx-darken(100);
      }
    }

    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active {
      @include var-color('background-color', 'secondary');
      @include var-color('border-color', 'secondary');
      @include cx-darken(84);

      &:focus {
        box-shadow: 0 0 0 0.2em rgba($secondary, 0.5);
      }
    }

    &:focus {
      box-shadow: 0 0 0 0.2em rgba($secondary, 0.5);
    }
  }

  &-link {
    color: theme-color('text');
    font-size: $font-size-base * 1.125;
    text-decoration: underline !important;
    cursor: pointer;
    display: inline-block;
  }
}

.btn-action {
  @extend .btn-outline-text !optional;
  border: 2px solid;

  &:hover {
    color: theme-color('primary');
    border: 2px solid theme-color('primary');
    background-color: theme-color('inverse');
  }

  &.active {
    color: theme-color('primary') !important;
    border: 2px solid !important;
    background-color: theme-color('inverse') !important;
  }

  &.disabled {
    border: 2px solid theme-color('light');
    color: theme-color('light');
    opacity: 1;
  }
}

.btn[aria-pressed='true'] {
  @extend .btn.active;
  &.btn-primary {
    @extend .btn-primary;
  }
  &.btn-secondary {
    @extend .btn-secondary;
  }
  &.btn-action {
    @extend .btn-action;
  }
}

.btn[aria-disabled='true'] {
  @extend .btn.disabled;
  cursor: auto !important;
  opacity: 0.6;
  &.btn-primary {
    @extend .btn-primary.disabled;
  }
  &.btn-secondary {
    @extend .btn-secondary.disabled;
  }
  &.btn-action {
    @extend .btn-action.disabled;
  }
}

.btn[disabled] {
  &.btn-primary {
    @extend .btn-primary.disabled;
  }

  &.btn-secondary {
    @extend .btn-secondary.disabled;
  }

  &.btn-action {
    @extend .btn-action.disabled;
  }
}
